<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import GeneralCourses from '@/components/course/GeneralCourses.vue';
import PaidCourses from '@/components/course/PaidCourses.vue';

const $route = useRoute()
const $router = useRouter()


const defaultActiveKey = ref(0)
</script>

<template>
  <div class="page">
    <div class="bg_fff">
      <a-tabs :default-active-key="defaultActiveKey" lazy-load :destroy-on-hide="true">
        <a-tab-pane :key="0" title="通用课程">
          <GeneralCourses></GeneralCourses>
        </a-tab-pane>
        <a-tab-pane :key="1" title="付费课程">
          <PaidCourses></PaidCourses>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>